<template>
  <div id="reply-list">
    <div>全部回复</div>
    <div ref="mescroll" class="mescroll">
      <div class="reply">
        <Reply v-for="item in list" :key="item.id" :content="item"/>
      </div>
    </div>
  </div>
</template>

<script>
import Reply from '../../components/reply'
import MeScroll from 'mescroll.js'

export default {
  name: "all-reply",
  components: {
    Reply
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    initScroll() {
      let el = this.$refs.mescroll
      this.mescroll = new MeScroll(el, {
        down: {
          auto: false,
          callback: this.downCb,
          // htmlContent: '<div>正在加载</div>',
        },
        up: {
          callback: this.upCb,
          // isBounce: false,
          toTop: {
            warpId: 'reply-list',
            src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552564535026&di=292077a2de481aa6984d76a175a5a481&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F48%2F04%2F13574410533dd07.jpg",
            offset: 1000, //列表滚动1000px才显示回到顶部按钮
          },
          htmlNodata: '<p class="upwarp-nodata">-- 没有更多信息了 --</p>',
          empty: {
            warpId: el,
            tip: "暂无相关评论~", //提示
          }
        }
      })
    },
    async downCb() {
      try {
        const res = await this.getList(1, 10)
        this.list = res.data
        this.mescroll.endSuccess()
      } catch (e) {
        this.mescroll.endErr()
      }
    },
    async upCb({num, size}) {
      try {
        const res = await this.getList(num, size)
        if (res.code === 1) {
          this.list = this.list.concat(res.data)
          this.mescroll.endBySize(res.data, res.count)
        }
      } catch (e) {
        this.mescroll.endErr()
      }
    },
    async getList(num, size) {
      const res = await this.$get('/discovery/articleCommentList', {
        id: this.$route.params.id,
        page: num || 1,
        size: size || 3
      })
      if (res.code === 1) {
        this.list = res.data
      }
    }
  },
  async mounted() {
    this.initScroll()
  }
}
</script>

<style scoped>

</style>
